<template>
  <van-nav-bar>
    <template #left>
      <router-link to="/city" tag="div">城市</router-link>
    </template>
    <template #title>
      <router-link to="/search" tag="div">卡姿兰大眼睛</router-link>
    </template>
    <template #right>
      <router-link to="/login" v-if="!userid" tag="div">登录</router-link>
      <router-link to="/user" v-else tag="div">我的</router-link>
    </template>
  </van-nav-bar>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { computed } from 'vue'
const userid = computed(() => useUserStore().userid)
</script>

<style lang="scss" scoped>
.van-nav-bar {
  font-weight: bold;
  background: #d30707;
  :deep(.van-nav-bar__left) {
    a {
      color: #fff;
    }
    font-size: 16px;
  }
  :deep(.van-nav-bar__title) {
    background: #fff;
    height: 60px;
    max-width: 70%;
    line-height: 62px;
    flex: 1;
    border-radius: 30px;
    box-sizing: border-box;
    padding-left: 36px;
    text-align: left;
    color: #232326;
    font-size: 15px;
  }
  :deep(.van-nav-bar__right) {
    font-size: 16px;
    a {
      color: #fff;
    }
  }
}
</style>
